﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();
            //绘制类型对象
        var typeSelect = document.getElementById('type');
        //绘制对象
        var draw;
		//实例化一个矢量图层Vector作为绘制层
        var source = new ol.source.Vector({ wrapX: false });
        var vector = new ol.layer.Vector({
            source: source,
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 255, 0.2)'
                }),
                stroke: new ol.style.Stroke({
                    color: '#ffcc33',
                    width: 2
                }),
                image: new ol.style.Circle({
                    radius: 7,
                    fill: new ol.style.Fill({
                        color: '#ffcc33'
                    })
                })
            })
        });
        //将绘制层添加到地图容器中
        map.addLayer(vector);

            function addInteraction() {
            var value = typeSelect.value;
            if (value !== 'None') {
                draw = new ol.interaction.Draw({
                    source: source,
                    /** @type {ol.geom.GeometryType}几何图形类型 */
                    type: (typeSelect.value),
                    freehand: true
                });
                map.addInteraction(draw);
            }
        }

        /**
        * 用户更改绘制类型触发的事件.
        * @param {Event} e 更改事件
        */
        typeSelect.onchange = function (e) {
            //移除绘制图形
            map.removeInteraction(draw);
            //添加交互绘制功能控件
            addInteraction();
        };
        //添加交互绘制功能控件
        addInteraction();
        }
    </script>
</head>
<body>
<div id="menu">
        <label style="font-weight: bold;">
            几何图形类型： &nbsp;
        </label>
        <select id="type">
            <option value="None">无</option>
            <option value="LineString" selected="selected">线</option>
            <option value="Polygon">区</option>
            <option value="Circle">圆</option>
        </select>&nbsp;&nbsp;&nbsp;
        <label style="font-weight: bold;">
            按住鼠标画图，松开鼠标后完成绘制
        </label>
    </div>
    <div id="map">
    </div>
</body>
</html>
